<template>
    <div class="alphabet">
        <ul>
            <li v-for="(item,index) of letters" :key="index" :ref="item" @click="handleLetter(item)" @touchstart.prevent="handleTouchStart" @touchend="handleTouchEnd" @touchmove="handleTouchMove">{{item}}</li>
        </ul>
    </div>
</template>
<script>
export default {
  name: 'CityAlphabet',
  props: {
    cities: Object
  },
  data () {
    return {
      touchFlag: false
    }
  },
  computed: {
    letters () {
      const letters = []
      for (let i in this.cities) {
        letters.push(i)
      }
      return letters
    }
  },
  methods: {
    handleLetter (letter) {
      this.$emit('handleLetter', letter)
    },
    handleTouchStart () {
      this.touchFlag = true
    },
    handleTouchMove (e) {
      if (this.touchFlag) {
        const startY = this.$refs['A'][0].offsetTop // offsetTop到第一个父级元素的距离
        const touchY = e.touches[0].clientY - 120 // clientY到屏幕顶端的距离减去头部的距离（120）
        const index = Math.floor((touchY - startY) / 23)// 23为每个字母li的高度   Math.floor()向下取整
        if (index > 0 && index < this.letters.length) {
          this.$emit('handleLetter', this.letters[index])
        }
      }
    },
    handleTouchEnd () {
      this.touchFlag = false
    }
  }
}
</script>
<style lang="stylus" scoped>
.alphabet {
    position: fixed;
    right: 0.1rem;
    top: 20%;
}

.alphabet li {
    height: 0.45rem;
    line-height: 0.45rem;
    color: #00bcd4;
}
</style>
